<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/js/elementui/index.css">
    <title>Title</title>
</head>
<style>
</style>
<body>
<div id="app">
    <!--选择地区查询-->
    <i class="el-icon-s-home"></i>
    <span style="height: 10px;">首页 ></span>
    <span style="height: 10px">我的客户</span>
    <el-divider><i></i></el-divider>
    <template>
        选择地区
        <el-select
                @change="getCity" v-model="keyWordOfProvince" placeholder="请选择省份">
            <el-option
                    v-for="item in company_province"
                    :key="item"
                    :label="item"
                    :value="item"
            >
            </el-option>
        </el-select>
        <el-select @change="getArea" v-model="keyWordOfCity" placeholder="请选择城市">
            <el-option
                    v-for="item in company_city"
                    :key="item"
                    :label="item"
                    :value="item"
            >
            </el-option>
        </el-select>
        <el-select v-model="keyWordOfArea" placeholder="请选择地区">
            <el-option
                    v-for="item in company_area"
                    :key="item"
                    :label="item"
                    :value="item"
            >
            </el-option>
        </el-select>
        客户名称
        <el-input v-model="input" style="width: 250px"></el-input>
        <el-button type="primary" icon="el-icon-search" size="small" @click="conditionQuery">搜索</el-button>
        <!--分割线-->
        <el-divider><i></i></el-divider>
    </template>
    <el-button type="success" @click="loadChoose">企业查询</el-button>
    <el-divider><i></i></el-divider>
    每页显示条数:
    <template>
        <el-input-number v-model="num" controls-position="right" @change="changePageSize" :min="1" :max="10" size="small"></el-input-number>
    </template>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%;text-align: center"
                :header-cell-style="{background:'#eee',color:'#606266'}"
                :default-sort = "{prop: 'id', order: 'descending'}"
                border>
            <el-table-column
                    prop="id"
                    sortable
                    label="序号"
                    width="180"
                    >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="客户名称"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.company.companyName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="地区"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.company.companyProvince }}{{ scope.row.company.companyCity }}{{ scope.row.company.companyArea }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="主要经营"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.company.businessScope }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="联系人"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.company.legal }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="联系电话"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.company.legalTel }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary" plain
                            @click="handleEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="loadPage"
            :current-page="curr"
            :page-size="pageSize">
    </el-pagination>
    <!--新增，修改表单-->
    <el-dialog title="客户信息" :visible.sync="dialogFormVisible" @close="closeForm">
        <el-form :model="customer">
            <el-form-item label="客户名称" :label-width="formLabelWidth">
                <el-input v-model="customer.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-select
                        @change="getFormCity" v-model="province" placeholder="请选择省份" style="width: 150px">
                    <el-option
                            v-for="item in company_province"
                            :key="item"
                            :label="item"
                            :value="item"
                    >
                    </el-option>
                </el-select>
                <el-select @change="getFormArea" v-model="city" placeholder="请选择城市" style="width: 150px">
                    <el-option
                            v-for="item in company_city"
                            :key="item"
                            :label="item"
                            :value="item"
                    >
                    </el-option>
                </el-select>
                <el-select v-model="area" placeholder="请选择地区" style="width: 150px">
                    <el-option
                            v-for="item in company_area"
                            :key="item"
                            :label="item"
                            :value="item"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="主要经营" :label-width="formLabelWidth">
                <el-input v-model="customer.business" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="customer.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="customer.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="customer.email" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOrModify">确 定</el-button>
        </div>
    </el-dialog>

    <!--新增，修改表单-->
    <el-dialog title="选择公司" :visible.sync="dialogNodeVisible" @close="closeNode">
        <template>
            选择公司:
            <el-select v-model="companyId" placeholder="请选择">
                <el-option
                        v-for="item in company"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureNode">确 定</el-button>
        </div>
    </el-dialog>
</div>

</body>
<script src="/js/area/area.js"></script>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                input:'',
                company_province:[],
                company_city:[],
                company_area:[],
                keyWordOfProvince:'',//模糊查询
                keyWordOfCity:'',//模糊查询
                keyWordOfArea:'',//模糊查询
                province:'',//form表单
                city:'',//form表单
                area:'',//form表单
                keyWord:'',
                total:0,
                pageSize:null,
                curr:1,
                num:7,
                tableData: null,
                customer:{
                    id:'',
                    name:'',
                    address:'',
                    telephone: '',
                    email:'',
                    remark:'',
                    business:'',
                    createTime:null,
                    updateTime:null,
                    createUserId:'',
                    updateUserId:'',
                    siteId:''
                },
                par:{
                    id:'',
                    tParStatus:'',
                    tParStatus2:'',
                    staffName:'',
                    tParTime:null,
                    tAprDesc:'',
                    tParComA:'',
                    customer:null,
                    tParComB:'',
                    tParRel:''
                },
                dialogFormVisible: false,
                formLabelWidth:"120px",
                dialogNodeVisible:false,
                company: [],
                companyId: ''
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            loadPage(curr){
                axios.get('/relation?curr='+this.curr+"&size="+this.num).then(value => {
                    if (value.data.code==1){
                        this.num=value.data.data.size;
                        this.tableData=value.data.data.records;
                        this.curr=value.data.data.current;
                        this.pageSize=value.data.data.size;
                        this.tatal=value.data.data.tatal;
                    }
                })
            },
            //条件查询
            conditionQuery(){
                axios.get("/relation/"+(this.keyWord!=''?this.keyWord:' ')+"/"+
                    (this.keyWordOfProvince!=''?this.keyWordOfProvince:' ')+"/"
                    +(this.keyWordOfCity!=''?this.keyWordOfCity:' ')+"/"
                    +(this.keyWordOfArea!=''?this.keyWordOfArea:' ')+"/"+1).then(value=>{
                    if(value.data.code==1){
                        this.tableData = value.data.data;
                    }
                });
            },
            //每页显示条数
            changePageSize(curr){
                this.loadPage(this.curr);
            },
            //表单三级联动
            getFormCity(){
                this.city='';
                this.company_city=[];
                this.area='';
                this.company_area=[];
                for (var i of city){
                    if (this.province==i.name){
                        for(var j of i.city){
                            this.company_city.push(j.name);
                        }
                    }
                }
            },getFormArea(){
                this.area='';
                this.company_area=[];
                for (var i of city){
                    if (this.province==i.name){
                        for(var j of i.city){
                            if (this.city==j.name){
                                for(var k of j.area){
                                    this.company_area.push(k);
                                }
                            }
                        }
                    }
                }
            },
            getCity(){
                this.keyWordOfCity='';
                this.company_city=[];
                this.keyWordOfArea='';
                this.company_area=[];
                for (var i of city){
                    if (this.keyWordOfProvince==i.name){
                        for(var j of i.city){
                            this.company_city.push(j.name);
                        }
                    }
                }
            },getArea(){
                this.keyWordOfArea='';
                this.company_area=[];
                for (var i of city){
                    if (this.keyWordOfProvince==i.name){
                        for(var j of i.city){
                            if (this.keyWordOfCity==j.name){
                                for(var k of j.area){
                                    this.company_area.push(k);
                                }
                            }
                        }
                    }
                }
            },
            //打开FORM
            openForm(){
                this.dialogFormVisible=true;
            },
            //关闭form清空数据
            closeForm(){
                this.customer={
                    id:'',
                    name:'',
                    address:'',
                    telephone: '',
                    email:'',
                    remark:'',
                    business:'',
                    createTime:null,
                    updateTime:null,
                    createUserId:'',
                    updateUserId:'',
                    siteId:''
                }
            },
            //新增和更新
            addOrModify(){
                //新增
                if (this.customer.id==''){
                    this.customer.address=this.province+this.city+this.area;
                    axios.post("/customer",this.customer).then(value => {
                        if (value.data.code==1){
                            this.$message("添加成功");
                            this.loadPage(1);
                            this.dialogFormVisible=false;
                        }else {
                            this.$message("添加失败");
                            this.loadPage(1);
                            this.dialogFormVisible=false;
                        }
                    })
                }else {//更新
                    this.customer.address=this.province+this.city+this.area;
                    axios.put("/customer?curr="+this.curr,this.customer).then(value => {
                        if (value.data.code==1){
                            this.$message("跟新成功");
                            this.loadPage(value.data.data);
                            this.dialogFormVisible=false;
                        }else {
                            this.$message("跟新失败");
                            this.loadPage(value.data.data);
                            this.dialogFormVisible=false;
                        }
                    })
                }
            },
            //跟新
            handleEdit(row){
                this.province='';
                this.city='';
                this.area='';
                this.customer=row;
                this.dialogFormVisible=true;
            },
            //删除
            handleDelete(row){
                axios.delete("/customer/"+row.id).then(value => {
                    if (value.data.code==1){
                        this.$message("删除成功");
                        this.loadPage(1);
                    }else {
                        this.$message("删除失败");
                        this.loadPage(1);
                    }
                })
            },
            //打开申请框
            openNode(row){
                this.customer=row;
                this.dialogNodeVisible=true;
                axios.get("/company").then(value => {
                    if (value.data.code==1){
                        var company=[];
                        var list = value.data.data;
                        for (let x of list) {
                            var s = {value:x.id,label:x.companyName};
                            company.push(s);
                        }
                        this.company=company;
                    }
                })
            },
            //确认申请
            sureNode(){
                if (this.companyId==""){
                    this.$message("请选择公司")
                }else {
                    this.par.tParComA=this.customer.id;
                    this.par.tParComB=this.companyId;
                    axios.post('/par',this.par).then(value => {
                        if (value.data.code==1){
                            this.$message("申请成功");
                            this.dialogNodeVisible=false;
                        }
                    })
                }

            },
            //关闭申请
            closeNode(){
                this.company='';
            },
            loadChoose(){
                location.href="/relation/choose-relation.html"
            }
        },
        mounted(){
            for (var i of city){
                this.company_province.push(i.name);
            }
            this.loadPage(1);
            //填充下拉栏--省
        }
    })
</script>
</html>